/**
 * 封装顶部导航栏公共组件
 */
import React from 'react'
import { Flex } from 'antd-mobile'
import { withRouter } from 'react-router-dom'
import './index.css'
import PropTypes from 'prop-types'


function SearchHeader ({ history, currentCityName,className }) {
   
  return (
    // <Flex className="search-box">
    <Flex className={['search-box',className || ''].join(' ')}>
      {/* 左侧白色区域 */}
      <Flex className="search">
        {/* 位置 */}
        <div
          className="location"
          onClick={() => history.push("/citylist")}
        >
          <span className="name">{currentCityName}</span>
          <i className="iconfont icon-arrow" />
        </div>

        {/* 搜索表单 */}
        <div className="form" onClick={() => history.push("/search")}>
          <i className="iconfont icon-seach" />
          <span className="text">请输入小区或地址</span>
        </div>
      </Flex>
      {/* 右侧地图图标 */}
      <i
        className="iconfont icon-map"
        onClick={() => history.push("/map")}
      />
    </Flex>
  )
}
// 设置校验
SearchHeader.propTypes = {
  currentCityName: PropTypes.string.isRequired,
  className: PropTypes.string
}
export default withRouter(SearchHeader)
